<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" type="text/css" media="screen"
          href="../static/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <ol class="breadcrumb">
        <li><a href="#">用户管理</a></li>
        <li class="active">用户修改</li>
        <li style="float: right"><a href="${base}/loginOut">退出</a>&nbsp;&nbsp;&nbsp;&nbsp;</li>
    </ol>

    <!-- 主体内容开始 -->
    <!-- 表单开始 -->

    <form action=""
          class="form-horizontal" id="commForm">
        <!-- 待编辑区 panel开始 -->
        <div class="panel panel-info">
            <div class="panel-heading">
                <i class="fa fa-pencil"></i>&nbsp;&nbsp;修改
            </div>
            <!-- panel-body开始 -->
            <div class="panel-body">
                <input type="hidden" name="id" />
                <div class="form-group">
                    <label for="taskName" class="col-sm-3 control-label">用户名称</label>
                    <div class="col-sm-5">

                        <input type="text" class="form-control" id="userName"
                               name="userName" placeholder="用户名称" >
                    </div>
                </div>

                <div class="form-group">
                    <label for="password" class="col-sm-3 control-label">用户密码</label>
                    <div class="col-sm-5">
                        <input type="password" class="form-control" id="password"
                               name="password" placeholder="用户密码" >
                    </div>
                </div>


            </div>
            <!-- panel-body结束 -->
            <!-- panel-footer开始 -->
            <div class="panel-footer text-right">
                <button type="button" name="returnBtn" class="btn btn-default"
                        id="returnBtn"
                        onclick="location.href='users.html'">返回</button>
                <button type="reset" name="resetBtn" id="resetBtn"
                        class="btn btn-warning">重置</button>
                <button type="submit" name="submitBtn" class="btn btn-primary"
                        id="submitBtn">提交</button>
            </div>
            <!-- panel-footer结束 -->
        </div>
        <!-- 待编辑区panel结束 -->
    </form>
    <!--表单结束 -->
</div>
</body>
</html>
<script src="../static/js/axios.min.js"></script>
<script>

    function getQueryParam(name) {
        const queryString = window.location.search;
        const params = new URLSearchParams(queryString);
        return params.get(name);
    }

    // 页面加载完毕执行的方法
    window.onload = function() {
        const id = getQueryParam("id")
        axios.get("/user/" + id)
            .then(function(response) {
                const R = response.data
                if (R.code === 200) {
                    const user = R.data
                    // console.log(user)
                    // 回显表单数据
                    document.getElementById("ipt-userId").value = user.id
                    document.getElementById("userName").value = user.username
                    document.getElementById("password").value = user.password

                }
            });

    }
    //修改用户信息
    document.getElementById("submitBtn")
        .onclick = function () {

        //获取input用户的数据
        const id = document.getElementById("ipt-userId").value
        const username = document.getElementById("userName").value
        const pwd = document.getElementById("password").value


        const url = "/user/update"
        const data = {
            "id": id,
            "username": username,
            "password": pwd
        }
        axios.put(url, data)
            .then(function (response) {

                const R = response.data

                if (R.code === 200) {
                    alert("修改成功")

                    location.href = "/users/users.html"
                }


            })
    }


</script>